<template>
  <div class="personal-center">
    <el-dropdown @command="handleCommand">
      <el-button round size="medium">
        {{ $store.state.Authentication.virtualName }}<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command="{path:'/personal',m:'21_1',ml:'21_1_1'}">个人信息</el-dropdown-item>
        <el-dropdown-item :command="{path:'/work',m:'22_1',ml:'22_1_1'}">我的办公</el-dropdown-item>
        <el-dropdown-item :command="{path:'/out'}">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
/**
 * 个人中心菜单
 */
export default {
  name: "PersonalCenterMenu",
  methods: {
    /***
     *{ 下拉菜单点击事件 }
     * @param:
     * @author: 宋康
     * @DateTime: 2022/7/1
     */
    handleCommand({path, m, ml}) {
      if ("/out" === path) {
        this.$store.commit('removeAuthentication');
        this.$router.push("/")
      } else {
        this.$router.push({
          path: path,
          query: {
            m, ml
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.personal-center {
  padding-right: 0.15625rem;
  line-height: 50px;
}

.el-dropdown-link {
  display: inline-block;
  padding: 0 20px;
  font-size: 18px;
  color: #fff;

  &:hover {
    cursor: pointer;
    background-color: #0048a2;
  }
}

.dropdown {
  background-color: rgb(0, 90, 202);

  li {
    padding: 0 35px;
    color: #fff;
  }

  li:hover {
    background-color: #0048a2;
    color: #fff;
  }
}
</style>
